import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { DisabledDateTimeComponent } from './disabled-date-time/disabled-date-time.component';
import { Demo5Component } from './demo5/demo5.component';
import { PresetDateRangeComponent } from './preset-date-range/preset-date-range.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';
import { CustomStyleComponent } from './custom-style/custom-style.component';
import { PickerModeComponent } from './picker-mode/picker-mode.component';
import { Demo12Component } from './demo12/demo12.component';
import { Demo13Component } from './demo13/demo13.component';
import { Demo15Component } from './demo15/demo15.component';
import { Demo16Component } from './demo16/demo16.component';

export const DatePickerConfig = {
  location: 'DatePicker',
  description: `用于选择年、月、日或某个日期范围的组件。`,
  description_en: `Components for selecting year, month, date or date ranges.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/date-picker/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic usage.'
    },
    {
      demo: Demo16Component,
      codePath: 'showcase/date-picker/demo16/demo16.component',
      demoTitle: '尺寸大小',
      demoTitle_en: 'Size',
      demoDescription: '',
      demoDescription_en: ''
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/date-picker/demo2/demo2.component',
      demoTitle: '日期格式',
      demoTitle_en: 'Format',
      demoDescription: '使用 lvFormat 属性，可以自定义日期显示格式。',
      demoDescription_en: 'You can customize the date display format using the lvFormat property.'
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/date-picker/demo3/demo3.component',
      demoTitle: '日期时间选择',
      demoTitle_en: 'Date and time selection',
      demoDescription: '增加选择时间功能，当 lvShowTime。',
      demoDescription_en: 'Added select time function when lvShowTime.'
    },
    {
      demo: DisabledDateTimeComponent,
      codePath: 'showcase/date-picker/disabled-date-time/disabled-date-time.component',
      demoTitle: '不可选择日期和时间',
      demoTitle_en: 'Date and time cannot be selected',
      demoDescription: '可用 lvDisabledDate 禁止日期,当 lvShowTime 为一个对象时，其属性可禁止时间',
      demoDescription_en:
        'An lvDisabledDate can be used to disable a date, and when an lvShowTime is an object, its properties can disable the time'
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/date-picker/demo5/demo5.component',
      demoTitle: '禁用组件',
      demoTitle_en: 'Disabled',
      demoDescription: '可用 lvDisabled 禁止组件',
      demoDescription_en: 'Components can be disabled by lvDisabled'
    },
    {
      demo: PresetDateRangeComponent,
      codePath: 'showcase/date-picker/preset-date-range/preset-date-range.component',
      demoTitle: '预设范围',
      demoTitle_en: 'The preset range',
      demoDescription: 'RangePicker 可以设置常用的 预设范围 提高用户体验。',
      demoDescription_en: 'RangePicker can set commonly used preset ranges to improve the user experience.'
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/date-picker/demo7/demo7.component',
      demoTitle: '页脚扩展',
      demoTitle_en: 'The footer extension',
      demoDescription: '在面板中自定义页脚。',
      demoDescription_en: 'Customize the footer in the panel.'
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/date-picker/demo8/demo8.component',
      demoTitle: '隐藏非当前月单元格',
      demoTitle_en: 'Hides cells that are not in the current month',
      demoDescription: '使用 lvOnlyShowActiveCell 属性隐藏非当前月单元格',
      demoDescription_en: 'Use the lvOnlyShowActiveCell property to hide cells that are not the current month'
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/date-picker/demo9/demo9.component',
      demoTitle: '禁用面板头部年月选择',
      demoTitle_en: 'Disable panel head month/month selection',
      demoDescription: '使用lvPanelTitleReadonly属性禁用面板头部年月选择',
      demoDescription_en: 'Disable panel head month/month selection using the lvPanelTitleReadonly property'
    },
    {
      demo: CustomStyleComponent,
      codePath: 'showcase/date-picker/custom-style/custom-style.component',
      demoTitle: '定制日期单元格',
      demoTitle_en: 'Customize the date cell',
      demoDescription: '使用 lvCalendarCell、lvCalendarMonthCell、lvCalendarYearCell 可以自定义日期单元格的内容和样式。',
      demoDescription_en:
        'You can customize the content and style of date cells using lvCalendarCell, lvCalendarMonthCell, and lvCalendarYearCell.'
    },
    {
      demo: PickerModeComponent,
      codePath: 'showcase/date-picker/picker-mode/picker-mode.component',
      demoTitle: '日历选择模式',
      demoTitle_en: 'Selection mode',
      demoDescription: '使用 lvPickerMode 可以设置日历的选择模式。',
      demoDescription_en: 'You can choose year, month, day, or simple mode using lvPickerMode.'
    },
    {
      demo: Demo12Component,
      codePath: 'showcase/date-picker/demo12/demo12.component',
      demoTitle: '内联展示模式',
      demoTitle_en: 'Inline display mode',
      demoDescription: '使用 lvInline 可以设置日历的内联展示模式。',
      demoDescription_en: 'Use lvInline to set the calendar\'s inline display mode.'
    },
    {
      demo: Demo13Component,
      codePath: 'showcase/date-picker/demo13/demo13.component',
      demoTitle: '事件',
      demoTitle_en: 'Events',
      demoDescription: '日历组件的回调事件。',
      demoDescription_en: 'The callback event.'
    },
    {
      demo: Demo15Component,
      codePath: 'showcase/date-picker/demo15/demo15.component',
      demoTitle: '指定时区',
      demoTitle_en: 'Specified Time Zone',
      demoDescription: '指定时区获取时间，值为目标时间与格林威治标准时间 (GMT) 的分钟差。',
      demoDescription_en: 'Specifies the time zone. The value is the minute difference between the target time and the GMT.'
    }
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      name: '共有接口 (lv-date-picker & lv-date-range-picker)',
      name_en: 'Common API (lv-date-picker & lv-date-range-picker)',
      api: [
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: `是否禁用。`,
          description_en: `Whether to disable.`
        },
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: `输入框大小。`,
          description_en: `Input size.`
        },
        {
          attribute: 'lvReadonly',
          type: 'boolean',
          default: 'false，lvFormat为Function时，lvReadonly一定为true',
          description: `输入框只读。`,
          description_en: `The text box is read-only.`,
          global: true
        },
        {
          attribute: 'lvFormat',
          type: 'string | ((date: Date) => string)',
          default: 'yyyy-MM-dd HH:mm:ss',
          description: `日期的显示格式。用法可参见 Angular DatePipe`,
          description_en: `Date display format.`
        },
        {
          attribute: 'lvTimezoneOffset',
          type: 'number',
          default: '--',
          description: `本地时间与格林威治标准时间 (GMT) 的分钟差。`,
          description_en: `Indicates the minute difference between the local time and the Greenwich Mean Time (GMT).`,
          global: true
        },
        {
          attribute: 'lvInline',
          type: 'boolean',
          default: 'false',
          description: `内联展示模式。`,
          description_en: `Inline display mode.`
        },
        {
          attribute: 'lvShowClear',
          type: 'boolean',
          default: 'true',
          description: `是否显示清除按钮。`,
          description_en: `Whether to display the clear button.`,
          global: true
        },
        {
          attribute: 'lvShowTime',
          type: 'boolean | LvDateTimeOption',
          default: 'false',
          description: `是否显示时间选择面板。LvDateTimeOption = { <br />
          format?: 'HH:mm:ss | HH:mm | mm:ss | hh:mm a | hh:mm A | hh:mm:ss a | hh:mm:ss A';<br />
          disabledHour?: (hour: number) => boolean;<br />
          disabledMinute?: (hour: number, minute: number) => boolean;<br />
          disabledSecond?: (hour: number, minute: number, second: number) => boolean;<br />
        }`,
          description_en: `Whether to display the time selection panel.`
        },
        {
          attribute: 'lvNowAsBaseTime',
          type: 'boolean',
          default: 'true',
          description: `是否以当前时间作为基准时间，否则以 00:00:00 作为基准时间。`,
          description_en: `Whether to use the current time as the base time. Otherwise, use 00:00:00 as the base time.`,
          global: true
        },

        {
          attribute: 'lvDisabledDate',
          type: '(date: Date) => boolean',
          default: '--',
          description: `禁用日期面板的单元格。`,
          description_en: `Disable the cell of the date panel.`
        },
        {
          attribute: 'lvOnlyShowActiveCell',
          type: 'boolean',
          default: 'false',
          description: `是否只显示当前状态的单元格，隐藏上一月、年，下一月、年的单元格。`,
          description_en: `Whether to only display the current active date cell, hide cell of the previous month, year, next month, year.`
        },
        {
          attribute: 'lvPanelTitleReadonly',
          type: 'boolean',
          default: 'false',
          description: `面板头部标题是否可触发选择。`,
          description_en: `Whether the panel header can trigger the selection.`
        },
        {
          attribute: 'lvCalendarYearOperate',
          type: '{ show?: boolean; // 是否显示 disableChange?: boolean; // 是否禁用更改 }',
          default: '{ show: true, disableChange: false }',
          description: `控制年份选择。`,
          description_en: `Control selection of the year.`
        },
        {
          attribute: 'lvCalendarMonthOperate',
          type: '{ show?: boolean; // 是否显示 disableChange?: boolean; // 是否禁用更改 }',
          default: '{ show: true, disableChange: false }',
          description: `控制月份选择。`,
          description_en: `Control selection of the month.`
        },
        {
          attribute: 'lvPanelClass',
          type: 'string',
          default: '--',
          description: `自定义面板样式。`,
          description_en: `Customize panel style.`
        },
        {
          attribute: 'lvCalendarCell',
          type: 'TemplateRef<Date>',
          default: '--',
          description: `自定义日期选择面板单元格。`,
          description_en: `Custom date selection panel cells.`
        },
        {
          attribute: 'lvCalendarMonthCell',
          type: 'TemplateRef<Date>',
          default: '--',
          description: `自定义月选择面板单元格。`,
          description_en: `Custom month selection panel cells.`
        },
        {
          attribute: 'lvCalendarYearCell',
          type: 'TemplateRef<Date>',
          default: '--',
          description: `自定义年选择面板单元格。`,
          description_en: `Custom year selection panel cells.`
        },
        {
          attribute: 'lvFooterExtra',
          type: 'TemplateRef',
          default: '--',
          description: `面板底部扩展。`,
          description_en: `Expansion at the bottom of the panel.`
        },
        {
          attribute: 'lvBackfillDisabledDate',
          type: 'boolean',
          default: 'false',
          description: `支持回填已禁用的时间点.`,
          description_en: `Support for backfilling disabled time points.`,
          global: true
        }
      ],
      event: [
        {
          event: 'lvOpenChange',
          parameter: `boolean`,
          description: '面板打开/关闭时的回调函数。',
          description_en: `Callback when panel is open / close.`
        },
        {
          event: 'lvActiveDateChange',
          parameter: `Date | Date[]`,
          description: '当前激活面板改变时的回调函数。',
          description_en: `Callback when panel is next / prev.`
        }
      ]
    },
    {
      name: 'lv-date-picker',
      name_en: 'lv-date-picker',
      selector: 'lv-date-picker',
      snippet: `<lv-date-picker ></lv-date-picker>`,
      api: [
        {
          attribute: 'ngModel',
          type: 'Date',
          default: 'null',
          description: `当前日期，可双向绑定。`,
          description_en: `Current Date, can be bound in two directions.`
        },
        {
          attribute: 'lvPickerMode',
          type: 'year | month | date | simple',
          default: 'date',
          description: `日期的选择模式，可选择年、月、天 和简易模式。`,
          description_en: `Selection mode, you can choose year, month, day, or simple mode.`
        },
        {
          attribute: 'lvShowTodayButton',
          type: 'boolean',
          default: 'true',
          description: `是否显示'今天'按钮。注：在未配置 lvShowTime 时显示。`,
          description_en: `Whether to show the 'Today' button.`
        },
        {
          attribute: 'lvShowNowButton',
          type: 'boolean',
          default: 'true',
          description: `是否显示'此刻'按钮。在配置 lvShowTime 时显示。`,
          description_en: `Whether to show the 'Now' button.`
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string',
          default: '--',
          description: `输入框中的提示信息。`,
          description_en: `Placeholder in the input.`
        }
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `Date`,
          description: '日期变更时的回调函数。',
          description_en: `Callback function when the date changes.`
        },
        {
          event: 'lvOnDateChange',
          parameter: `Date`,
          description: '面板初始化、通过面板交互动作选中时触发的面板日期变更时的回调函数（在lvShowTime回调之前触发）。',
          description_en: `Callback function triggered when the panel date changes when the panel is initialized and selected through the panel interaction action (triggered before the lvShowTime callback function).`
        }
      ]
    },
    {
      name: 'lv-date-range-picker',
      name_en: 'lv-date-range-picker',
      selector: 'lv-date-range-picker',
      snippet: `<lv-date-range-picker ></lv-date-range-picker>`,
      api: [
        {
          attribute: 'ngModel',
          type: 'Date[]',
          default: '[null, null]',
          description: `当前日期范围，可双向绑定。`,
          description_en: `Current Date range, can be bound in two directions.`
        },
        {
          attribute: 'lvPresetRanges',
          type: '{[key: string]: Date[]}[]',
          default: '--',
          description: `预置快速选择的日期范围。`,
          description_en: `Preset quick selection date range.`
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string[]',
          default: '--',
          description: `输入框中的提示信息。`,
          description_en: `Placeholder in the input.`
        },
        {
          attribute: 'lvCurrentInput',
          type: 'start | end',
          default: 'start',
          description: `用于内联模式选中start和end。`,
          description_en: `Select start and end for inline mode.`
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `Date[]`,
          description: '日期范围变更时的回调函数。',
          description_en: `Callback function when the date range changes.`
        },
        {
          event: 'lvRangeTagChange',
          parameter: `String`,
          description: '开始、结尾时间选择切换面板时的回调函数。',
          description_en: `Callback function when start and end times select panels change.`
        }
      ]
    },
    {
      name: '全局配置',
      name_en: 'Global Configuration',
      api: [
        {
          attribute: 'firstDayOfWeek',
          type: 'number',
          default: '1',
          description: `日历的第一个单元格显示星期几。0：星期天，1：星期一，2：星期二，3：星期三，4：星期四，5：星期五，6：星期六`,
          description_en: `The first cell in the calendar shows the day of the week. 0: Sunday, 1: Monday, 2: Tuesday, 3: Wednesday, 4: Thursday, 5: Friday, 6: Saturday`
        }
      ]
    }
  ]
};
